<script setup>
import { RouterLink } from "vue-router";
import HomePanel from "./HomePanel.vue"
import { getNewGoods } from "@/api/home"
import { onMounted,ref } from "vue";
const newGoosList = ref([])
const getNewGoodsList = () => {
    getNewGoods({limit:4}).then(res => {
        newGoosList.value = res.result || []
    })
}
onMounted(() => {
    getNewGoodsList()
})
</script>

<template>
   <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质好物">
    <ul class="goods-list">
        <li v-for="item in newGoosList" :key="item.id">
            <RouterLink>
                <img :src="item.picture" alt="">
                <p class="name">{{ item.name}}</p>
                <p class="price">{{ item.price}}</p>
            </RouterLink>
        </li>
    </ul>
   </HomePanel>
</template>
<style lang="scss" scoped>
.goods-list {
    display:flex;
    justify-content:space-between;
    height:406px;
    li {
       width: 306px; 
       height: 406px;
       background:#f0f9f4;
       transition:all .5s;
       &:hover {
        transform: translate3d(0,-3px,0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
       }
       img {
        width: 306px;
        height: 306px;
       }
       p {
        font-size:22px;
        padding-top:12px;
        text-align:center;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
       }
       .price {
        color:$priceColor;
       }
    }
}
</style>